<template>
  <div
    class="login"
    v-loading="loading"
    element-loading-text="页面加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <!-- <canvas id="mycanvas"></canvas> -->
    <div class="loginBox">
      <div class="loginImage">
        <!-- <img class="img" src="@/assets/img/dllogo.png" alt="" /> -->
      </div>
      <div class="loginInfo">
        <!-- <div class="title">工程项目生产质量数字化监控平台</div> -->
        <div class="right_left"></div>
      </div>
      <div class="loginCopy">
        <!-- <div class="copy">技术支持: Copyright © 四川云检科技发展有限公司</div>
            <div class="date">更新日期: 2023-07-07</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { loginHttps } from "@/api/request.js";

export default {
  data() {
    return {
      ctx: null,
      myCanvas: null,
      balls: [],
      centerY: null,
      speedX: null,
      speedY: null,
      color: null,
      //   loginForm: {
      //     username: "",
      //     password: "",
      //   },
      getData: {
        token: "",
        code: "",
      },
      newpwd: "",

      loading: true,
      userInfo: {},

      leftNameData: [
        // 试验机管理
        {
          title: "试验机管理",
          img: "iconfont icon-xitongguanli1",
          name: "testMachineManage",
          left: 0,
          children: [
            {
              title: "版本管理",
              path: "/versionManage",
              path2: "",
              name: "version",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "试验名称",
              path: "/testNameManage",
              path2: "",
              name: "testNameManage",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "设备管理",
              path: "/equipmentManage",
              path2: "",
              name: "equipmentManage",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        // 异常数据处理
        {
          title: "异常数据处理",
          img: "iconfont icon-xitongguanli1",
          name: "abnormalDataProcessManage",
          left: 0,
          children: [
            {
              title: "数据处理",

              path: "/abnormalDataProcess",
              path2: "",
              name: "abnormalDataProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        // 待试验样品
        {
          title: "待试验样品",
          img: "iconfont icon-xitongguanli1",
          name: "sampleTestManage",
          left: 0,
          children: [
            {
              title: "水泥",
              path: "/cementTest",
              path2: "",
              name: "cementTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "钢筋",
              path: "/rebarTest",
              path2: "",
              name: "rebarTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "混凝土",
              path: "/concreteTest",
              path2: "",
              name: "concreteTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "砂浆",
              path: "/mortarTest",
              path2: "",
              name: "mortarTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "净浆",
              path: "/pastTest",
              path2: "",
              name: "pastTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "岩石",
              path: "/rockTest",
              path2: "",
              name: "rockTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "水稳",
              path: "/waterStabilityTest",
              path2: "",
              name: "waterStabilityTest",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        // 试验数据监控
        {
          title: "试验数据监控",
          img: "iconfont icon-xitongguanli1",
          name: "testMonitorManage",
          left: 0,
          children: [
            {
              title: "水泥",
              path: "/cementMonitor",
              path2: "",
              name: "cementMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "钢筋",
              path: "/rebarMonitor",
              path2: "",
              name: "rebarMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "混凝土",
              path: "/concreteMonitor",
              path2: "",
              name: "concreteMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "砂浆",
              path: "/mortarMonitor",
              path2: "",
              name: "mortarMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "净浆",
              path: "/pastMonitor",
              path2: "",
              name: "pastMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "岩石",
              path: "/rockMonitor",
              path2: "",
              name: "rockMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "水稳",
              path: "/waterStabilityMonitor",
              path2: "",
              name: "waterStabilityMonitor",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        // 试验数据处理
        {
          title: "试验数据处理",
          img: "iconfont icon-xitongguanli1",
          name: "testProcessManage",
          left: 0,
          children: [
            {
              title: "水泥",
              path: "/cementProcess",
              path2: "",
              name: "cementProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "钢筋",
              path: "/rebarProcess",
              path2: "",
              name: "rebarProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "混凝土",
              path: "/concreteProcess",
              path2: "",
              name: "concreteProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "砂浆",
              path: "/mortarProcess",
              path2: "",
              name: "mortarProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "净浆",
              path: "/pastProcess",
              path2: "",
              name: "pastProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "岩石",
              path: "/rockProcess",
              path2: "",
              name: "rockProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "水稳",
              path: "/waterStabilityProcess",
              path2: "",
              name: "waterStabilityProcess",
              name2: "",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        {
          title: "数据统计分析",
          img: "iconfont icon-xitongguanli1",
          name: "dataStatisticalAnalysisManage",
          left: 0,
          children: [
            {
              title: "混凝土质量趋势",
              path: "/concreteQuality",
              path2: "",
              name: "concreteQuality",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },

            {
              title: "钢筋质量趋势",
              path: "/rebarQuality",
              path2: "",
              name: "rebarQuality",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "水泥质量趋势",
              path: "/cementQuality",
              path2: "",
              name: "cementQuality",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "砂浆质量趋势",
              path: "/mortarQuality",
              path2: "",
              name: "mortarQuality",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
            {
              title: "净浆质量趋势",
              path: "/pasteQuality",
              path2: "",
              name: "pasteQuality",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 50,
            },
          ],
        },
        // 系统管理
        {
          title: "系统管理",
          img: "iconfont icon-xitongguanli",
          name: "SysManage",
          left: 0,
          children: [
            {
              title: "组织机构",
              name: "BaseManage",
              img: "iconfont icon-gongcheng",

              left: 25,
              children: [
                {
                  title: "机构管理",
                  path: "/mechanism",
                  path2: "",
                  img: "iconfont icon-tongjibaobiao2",
                  children: [],
                  name: "CompanyManage",
                  left: 70,
                },
                {
                  title: "部门管理",
                  path: "/department",
                  path2: "",
                  img: "iconfont icon-tongjibaobiao2",
                  left: 70,
                  children: [],
                  name: "DepartmentManage",
                },
                {
                  title: "岗位管理",
                  path: "/postManagement",
                  path2: "",
                  children: [],
                  name: "PostManage",
                  img: "iconfont icon-tongjibaobiao2",
                  left: 70,
                },
                {
                  title: "角色管理",
                  path: "/roleManagement",
                  path2: "",
                  children: [],
                  name: "RoleManage",
                  img: "iconfont icon-tongjibaobiao2",
                  left: 70,
                },
                {
                  title: "用户管理",
                  path: "/user",
                  path2: "",
                  children: [],
                  img: "iconfont icon-tongjibaobiao2",
                  left: 70,
                  name: "UserManage",
                },
              ],
            },
            {
              title: "数据字典",
              path: "/dictionaryPage",
              path2: "",
              name: "dictionaryPage",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 62,
            },
            {
              title: "敏捷开发",
              name: "minjManage",
              img: "iconfont icon-gongcheng",
              left: 25,
              children: [
                {
                  title: "代码生成器",
                  path: "/codeGenerator",
                  path2: "",
                  img: "iconfont icon-tongjibaobiao2",
                  children: [],
                  name: "codeGenerator",
                  left: 70,
                },
              ],
            },
            {
              title: "系统功能",
              path: "/systemData",
              path2: "",
              name: "systemData",
              img: "iconfont icon-shengchanguanli1",
              children: [],
              left: 62,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    // this.canvas();
    // var aa ="http://xayj.limsapp.cn:8302/#/loginHttps?code=WZB%2BgLp03D9aTvrQe8N900T%2FU2o8KS%2BUU9wbhNIwjQQ%";

    this.getUserInfo(
      window.location.href.split("?")[1].slice(0, 4),
      window.location.href.split("=")[1]
    );
    console.log(
      77,
      window.location.href.split("?")[1].slice(0, 4),
      window.location.href.split("=")[1]
    );

    // window.location.href.split("=")[1].split("&")[0],

    //
    // this.getUserInfo(aa.split("=")[1]);
  },
  destroyed() {},

  methods: {
    // async getUserInfo(e) {
    //     var http = 'http://1.14.103.201:80/qualityManagementPlatform/Base/User/loginHttps' + window.location.href.split("=")[1]
    //     //
    //     await this.$http.post(
    //         http, {
    //         userName: e
    //     }

    //     ).then((res) => {
    //         console.log(res);
    //     });
    // },
    getUserInfo(status, e) {
      this.loading = false;
      loginHttps({
        username: e,
      })
        .then((res) => {
          if (res.errcode == 0) {
            this.loading = false;
            this.$store.commit("increase", JSON.stringify(this.leftNameData));
            // console.log(res);
            window.sessionStorage.setItem("monitorBack-token", res.data.session); // 将token本地存储到回话中
            //本地需要存的信息
            window.sessionStorage.setItem(
              "monitorBack-CompanyNature",
              JSON.stringify(res.data.CompanyNature)
            );

            window.sessionStorage.setItem(
              "monitorBack-ModuleList",
              JSON.stringify(res.data.ModuleList)
            );
            window.sessionStorage.setItem(
              "monitorBack-userInfo",
              JSON.stringify(res.data.userInfo)
            );
            this.$store.commit(
              "monitorBack-userInfoData",
              JSON.stringify(res.data.userInfo)
            );

            window.sessionStorage.setItem(
              "monitorBack-surfaceList", //表面计算
              JSON.stringify(res.data.surfaceList)
            );
            window.sessionStorage.setItem(
              "monitorBack-detectionList", //角度计算
              JSON.stringify(res.data.detectionList)
            );
            window.sessionStorage.setItem(
              "monitorBack-concretetypeList", //泵送混凝土
              JSON.stringify(res.data.concretetypeList)
            );
            window.sessionStorage.setItem(
              "monitorBack-concretetypeunList", ////非泵送混凝土
              JSON.stringify(res.data.concretetypeunList)
            );

            var activePath;
            if (status == "code") {
              activePath = "/outsourcedSample"; //外委
            } else if (status == "CLWT") {
              activePath = "/sampleMaterial"; //外委;//材料委托
            } else if (status == "ZNYH") {
              activePath = "/sampleStorage"; //智能养护
            } else if (status == "WASD") {
              activePath = "/temperature&humidity"; //温湿度
            }else if(status == "WIND") {
              activePath = "/index"; //首页
            }

            this.$message.success("登录成功");
            this.$router.push(activePath);
          } else {
            // this.$message.error("登录失败");
            this.loading = false;
            this.$router.push("/");
            // return false;
          }
        })
        .catch(() => {
          console.log("loginfree登录接口报错");
          this.loading = false;
        });
    },

    getTu() {
      // var canvas = mycanvas;
      var canvas = document.getElementById("mycanvas");

      /*获取屏幕宽高。用作适配*/
      var w = window.innerWidth;
      var h = window.innerHeight;
      canvas.width = w;
      canvas.height = h;
      canvas.backgroundColor = "#000";
      var ctx = canvas.getContext("2d");

      function Build() {
        this.ctx = ctx;
        this.counts = 300; //最大粒子数
        this.maxSize = 4; //初始化最大的大小
        (this.halfWidth = w / 2), (this.halfHeight = h / 2);
        this.arr = []; //用于存储变量
      }
      Build.prototype.add = function (coor) {
        var grd = this.ctx.createRadialGradient(
          coor.x,
          coor.y,
          coor.size / 2,
          coor.x,
          coor.y,
          coor.size
        );
        grd.addColorStop(0, "white");
        grd.addColorStop(1, coor.color);
        this.ctx.fillStyle = grd;
        this.ctx.beginPath();
        this.ctx.arc(coor.x, coor.y, coor.size, 0, Math.PI * 2, true);
        this.ctx.transform(1, 0, 0, 1, 0, coor.z);
        this.ctx.closePath();
        this.ctx.fill();
      };
      Build.prototype.init = function () {
        this.run();
        this.render();
        this.animate();
      };
      Build.prototype.run = function () {
        var nums = 0;
        while (nums < this.counts) {
          var coor = {
            x: Math.ceil(Math.random() * w),
            y: Math.ceil(Math.random() * h),
            posx: Math.random() * w - this.halfWidth,
            posy: Math.random() * h - this.halfHeight,
            fl: 100,
            speed: Math.random() * 1,
            posz: Math.random() * 250,
            r: Math.ceil(Math.random() * this.maxSize),
            color:
              "rgba(" +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.ceil(Math.random() * 255) +
              "," +
              Math.random() +
              ")",
          };
          this.arr.push(coor);
          nums++;
        }
      };
      Build.prototype.clear = function () {
        ctx.clearRect(0, 0, w, h);
      };
      Build.prototype.render = function () {
        this.clear();
        for (var item of this.arr) {
          this.draw(item);
        }
      };
      (Build.prototype.animate = function () {
        var _this = this;
        this.render();
        /*api自带方法*/
        window.requestAnimationFrame(function () {
          _this.animate();
        });
      }),
        (Build.prototype.draw = function (item) {
          if (item.posz > -item.fl) {
            /*连续修改scale，保持变化，用于控制量子大小，在屏幕上的位置*/
            var scale = item.fl / (item.fl + item.posz);
            /*修改对应数据*/
            item.x = this.halfWidth + item.posx * scale;
            item.y = this.halfHeight + item.posy * scale;
            item.size = item.r * scale;
            item.posz -= item.speed;
          } else {
            /*初始化超出屏幕的量子。达成屏幕量子数量保持衡量的方法*/
            item.posz = Math.random() * 250;
          }
          this.add(item);
        });
      var app = new Build();
      app.init();
      window.addEventListener(
        "resize",
        function () {
          canvas.width = w = window.innerWidth;
          canvas.height = h = window.innerHeight;
        },
        false
      );
    },
    canvas() {
      var myCanvas = document.getElementById("mycanvas");
      var ctx = myCanvas.getContext("2d");
      var w = window.innerWidth;
      var h = window.innerHeight;
      myCanvas.width = w;
      myCanvas.height = h;
      // var min = 1;

      var max = 3;

      // myCanvas.width = document.documentElement.clientWidth;

      // myCanvas.height = document.documentElement.clientHeight;

      function Ball() {
        this.centerX = getRandom(max, myCanvas.width - max);

        this.centerY = getRandom(max, myCanvas.height - max);

        this.radius = getRandom(1, 3);

        this.color = getRandomColor();

        var speed1 = getRandom(1, 1);

        this.speedX = getRandom(0, 1) ? -speed1 : speed1;

        var speed2 = getRandom(1, 1);

        this.speedY = getRandom(0, 1) ? -speed2 : speed2;
      }

      Ball.prototype.move = function () {
        this.centerX += this.speedX;

        this.centerY += this.speedY;
      };

      Ball.prototype.draw = function () {
        ctx.beginPath();

        ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, false);

        ctx.closePath();

        ctx.fillStyle = this.color;

        ctx.fill();
      };

      function getRandom(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }

      function getRandomColor() {
        return "#76A6FB";
        // return "rgb(" + red + "," + green + "," + blue + ")";
      }

      //   var count = 1000;
      var count = 100;

      var balls = [];

      for (var i = 0; i < count; i++) {
        var ball = new Ball();

        balls.push(ball);
      }

      function startAnimation() {
        ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);

        ctx.font = "100px STKaiTi";

        ctx.strokeStyle = "white";

        // ctx.strokeText("SQ", myCanvas.width / 2.2, myCanvas.height / 2, 500);

        for (i = 0; i < balls.length; i++) {
          balls[i].move();

          balls[i].draw();
        }

        adjustPB();
      }

      // setInterval("startAnimation()", 5500);
      setInterval(() => {
        startAnimation();
      }, 50);

      //碰壁反弹

      function adjustPB() {
        for (var i = 0; i < balls.length; i++) {
          if (
            balls[i].centerX <= balls[i].radius ||
            balls[i].centerX >= myCanvas.width - balls[i].radius
          ) {
            balls[i].speedX *= -1;
          }

          if (
            balls[i].centerY <= balls[i].radius ||
            balls[i].centerY >= myCanvas.height - balls[i].radius
          ) {
            balls[i].speedY *= -1;
          }
        }
      }
      window.addEventListener(
        "resize",
        function () {
          myCanvas.width = w = window.innerWidth;
          myCanvas.height = h = window.innerHeight;
        },
        false
      );
    },
  },
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  // background: url("../assets/img/bg_img.jpg") no-repeat;
  // background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .loginBox {
    width: 38%;
    height: 77.77%;
    position: absolute;
    // padding-top: 2%;
    padding-top: 0.6rem;
    min-width: 340px !important;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .loginImage {
      display: flex;
      justify-content: center;
      // margin-bottom: 3%;
      margin-bottom: 0.4rem;

      .img {
        width: 2.14rem;
        // height: 0.8rem;
      }
    }

    .loginInfo {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      flex: 1;

      .title {
        font-size: 0.4rem;
        color: #ffffff;
        letter-spacing: 1px;
      }
    }

    .loginCopy {
      display: flex;
      justify-content: space-around;
      font-size: 0.14rem;
      color: #fff;
    }
  }
}

.login_left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 0.4rem;
}

.right_left {
  flex: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 0.4rem;
}

// .login_form {
//   // width: 380px;
//   width: 3.8rem;
//   min-width: 200px !important;
// }

// .login /deep/.el-form-item__content {
//   position: relative;
// }

// .login /deep/.el-input__inner {
//   height: 46px !important;
//   font-size: 0.16rem;
//   padding: 0 0 0 45px !important;
// }

// .login /deep/.el-form-item {
//   margin-bottom: 24px;
// }

// .login /deep/.el-input__suffix {
//   left: 2% !important;
//   position: absolute;
//   width: 30px;
// }

// .login /deep/.el-input__icon {
//   font-size: 18px;
// }

// .login /deep/.el-form-item__content {
//   margin-left: 0px !important;
//   text-align: center;
// }

// .login /deep/.el-button--primary {
//   width: 100% !important;
// }

// .btnsGo /deep/.el-button--primary {
//   width: 99% !important;
//   height: 46px;
//   margin-top: 0.6rem;

//   border: none;
//   color: #fff;
//   background: #007fff;
//   font-size: 16px;
// }

// .btnsGo /deep/.el-button {
//   padding: 0;
//   margin-left: 0;
//   display: flex !important;
//   justify-content: center !important;
// }

// .btnsGo /deep/.el-form-item__content {
//   width: 100%;
// }
</style>
